<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		   children()     功能：获取匹配元素集合中每个元素的子元素
		   parent()       功能：获取匹配元素集合中每个元素的父元素
		   
		   siblings()     功能：获取匹配元素集合中每个元素所有兄弟元素
		   
		   next()         功能：获取匹配元素集合中每个元素下一个兄弟元素
		   prev()         功能：获取匹配元素集合中每个元素上一个兄弟元素
		   
		   each()         功能：遍历匹配元素的集合--遍历所有子元素
                           语法糖：each(function(index,element){
                               $(element)text(``)        
                           注意:打印遍历的值，不可以使用单双引号+拼接
                           功能：获取到的元素，遍历元素内容              
                            })
                             index：下标 element：元素  无参
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.container{
				border: 1px solid red;
				padding: 10px;
				margin: 10px;
			}
			.box{
				background-color: aqua;
				padding: 10px;
				margin: 10px;
			}
			button{
				padding: 5px;
				margin: 10px;
				
			}
			.sty{
			     border-radius: 50%; 
			     background-color: #ff00ff; 
			     box-shadow: 0 0 10px rgba(0,0,0,0.5);
			     width:300px;
			     height:300px;
			     background-image:url(../img/456.gif);
			                }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		<script>
			/* 1.点击获取子元素 按钮  实现.container下所有子元素添加背景色 */
			$("#gc").click(function(){
				//通过 父找子 函数 --添加效果
				$(".container").children().css("background-color","blue");
			});
			/* 2.点击获取父元素  实现container 添加背景色 */
			$("#gp").click(function(){
				$(".box").parent().css("background-color","red");
			});
			/* 3.获取所有的兄弟元素 按钮   实现除了盒子4 别的都变色 */
			$("#gs").click(function(){
				$("#box4").siblings().css("background-color","yellow");
			});
			/* 4.点击获取下一个兄弟元素 按钮 实现box4的下一个兄弟 */
			$("#gn").click(function(){
				$("#box4").next().css("background-color","#e4393c");
			});
			/* 5.点击获取上一个兄弟元素 按钮 实现box6上一个兄弟 添加效果
			 圆、背景图、背景色、盒子阴影
			 */
		   $("#gr").click(function(){
		                   $("#box6").prev().addClass("sty");
		               });
		   /* 6.点击 遍历元素 按钮  实现每个盒子上，这是第几个盒子*/    
				$("#loop").click(function(){
					//通过 .box 抓到6个元素【一组集合】
					$(".box").each(function(i,e)){
						//e 代表元素  i代表下标
						//每个盒子加文字：这是第几个盒子
						$(e).text(`这是第${i+1}盒子`);
					}
				});
		</script>
	</body>
</html>